<template>
  <div class="app-container">
    <div class="filterDiv">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="传统样式" name="1" />
        <el-tab-pane label="分期间" name="2" />
        <el-tab-pane label="汇总样式" name="3" />
      </el-tabs>
      <label class="label">期间</label>
      <PeriodList :start="listQuery.periodCode1" :end="listQuery.periodCode2" />
      <label class="label">仓库</label>
      <warehouseList key-type="warehouseId" :select-id="listQuery.warehouseId" @selectChange="changeVal1" />
      <label class="label">存货</label>
      <itemList :select-id="listQuery.itemId" :border="true" place-txt="选择存货" @changeVal="changeVal2" />
      <label class="label">批次号</label>
      <el-input v-model="listQuery.batchNo" size="small" placeholder="批次号" style="width:120px" />
      <el-button size="small" type="primary" round @click="getList">查询</el-button>
      <el-button-group style="float:right;margin-top:5px">
        <el-button v-permiss="['365010']" type="primary" size="small" round icon="el-icon-printer" title="打印" @click="printBook" />
        <el-button v-permiss="['365020']" type="primary" size="small" round icon="el-icon-document" title="导出" @click="exportBook" />
      </el-button-group>
    </div>
    <div v-show="activeTab == 1" class="contentDiv">
      <el-table :key="tableKey" v-loading="listLoading" :data="pageData" cell-class-name="tpCell" border fit highlight-current-row style="width: 100%;" size="small">
        <el-empty slot="empty" :image-size="120" />
        <el-table-column label="仓库" show-overflow-tooltip>
          <template slot-scope="{row}">
            <span style="padding-left:10px" v-html="row.warehouseName" />
          </template>
        </el-table-column>
        <el-table-column label="存货">
          <template slot-scope="{row}">
            <span style="padding-left:10px" v-html="row.itemName" />
          </template>
        </el-table-column>
        <el-table-column label="规格型号">
          <template slot-scope="{row}">
            <span style="padding-left:10px" v-html="row.norms" />
          </template>
        </el-table-column>
        <el-table-column label="批次号">
          <template slot-scope="{row}">
            <span style="padding-left:10px" v-html="row.batchNo" />
          </template>
        </el-table-column>
        <el-table-column label="期间">
          <template slot-scope="{row}">
            <span style="padding-left:10px" v-html="row.periodCode" />
          </template>
        </el-table-column>
        <el-table-column label="期初">
          <el-table-column label="数量">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.beginBalanceQtyDr" />
            </template>
          </el-table-column>
          <el-table-column label="平均价">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.beginBalanceWmap" />
            </template>
          </el-table-column>
          <el-table-column label="金额">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.beginBalanceDr" />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="入库">
          <el-table-column label="数量">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.periodNetQtyDr" />
            </template>
          </el-table-column>
          <el-table-column label="平均价">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.drWmap" />
            </template>
          </el-table-column>
          <el-table-column label="金额">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.periodNetDr" />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="出库">
          <el-table-column label="数量">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.periodNetQtyCr" />
            </template>
          </el-table-column>
          <el-table-column label="平均价">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.periodNetCr" />
            </template>
          </el-table-column>
          <el-table-column label="金额">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.periodNetCr" />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="期末">
          <el-table-column label="数量">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.balanceQtyDr" />
            </template>
          </el-table-column>
          <el-table-column label="平均价">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.wmap" />
            </template>
          </el-table-column>
          <el-table-column label="金额">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.balanceDr" />
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <pagination v-show="total>10" :total="total" :page.sync="listQuery.pageIndex" @pagination="getDataByPage" />
    </div>
    <div v-show="activeTab == 2 || activeTab == 3" class="contentDiv">
      <el-table :key="tableKey" v-loading="listLoading" :data="pageData" cell-class-name="tpCell" border fit highlight-current-row style="width: 100%;" size="small">
        <el-empty slot="empty" :image-size="120" />
        <el-table-column label="仓库" show-overflow-tooltip>
          <template slot-scope="{row}">
            <span style="padding-left:10px" v-html="row.warehouseName" />
          </template>
        </el-table-column>
        <el-table-column label="存货">
          <template slot-scope="{row}">
            <span style="padding-left:10px" v-html="row.itemName" />
          </template>
        </el-table-column>
        <el-table-column label="规格型号">
          <template slot-scope="{row}">
            <span style="padding-left:10px" v-html="row.norms" />
          </template>
        </el-table-column>
        <el-table-column label="批次号">
          <template slot-scope="{row}">
            <span style="padding-left:10px" v-html="row.batchNo" />
          </template>
        </el-table-column>
        <el-table-column label="期间">
          <template slot-scope="{row}">
            <span style="padding-left:10px" v-html="row.periodCode" />
          </template>
        </el-table-column>
        <el-table-column label="期初">
          <el-table-column label="数量">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.beginBalanceQtyDr" />
            </template>
          </el-table-column>
          <el-table-column label="平均价">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.beginBalanceWmap" />
            </template>
          </el-table-column>
          <el-table-column label="金额">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.beginBalanceDr" />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="入库">
          <el-table-column label="数量">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.periodNetQtyDr" />
            </template>
          </el-table-column>
          <el-table-column label="平均价">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.drWmap" />
            </template>
          </el-table-column>
          <el-table-column label="金额">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.periodNetDr" />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="出库">
          <el-table-column label="数量">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.periodNetQtyCr" />
            </template>
          </el-table-column>
          <el-table-column label="平均价">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.crWmap" />
            </template>
          </el-table-column>
          <el-table-column label="金额">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.periodNetCr" />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="期末">
          <el-table-column label="数量">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.balanceQtyDr" />
            </template>
          </el-table-column>
          <el-table-column label="平均价">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.wmap" />
            </template>
          </el-table-column>
          <el-table-column label="金额">
            <template slot-scope="{row}">
              <span style="padding-left:10px" v-html="row.balanceDr" />
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <pagination v-show="total>20" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.limit" @pagination="getDataByPage" />
    </div>
  </div>
</template>
<script>
import { getItemLedger, exportLedgernum, printLedgernum } from '@/api/accbook'
import PeriodList from '@/components/voucher/periodList'
import { getNowMonth, deepClone } from '@/utils/index'
import warehouseList from '@/components/selects/warehouseList'
import itemList from '@/components/selects/itemList'
export default {
  name: 'Ledgernum',
  components: { PeriodList, warehouseList, itemList },
  filters: {
    zeroNull: function(num) {
      return num || ''
    },
    Fixed: function(num) {
      if (!num) {
        return ''
      }
      return parseFloat(num).toFixed(2)
    }
  },
  data() {
    return {
      activeTab: '1',
      tableKey: 0,
      tableData: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      pageData: [],
      total: 0,
      listLoading: true,
      listQuery: {
        periodCode1: getNowMonth(),
        periodCode2: getNowMonth(),
        warehouseId: '',
        itemId: '',
        batchNo: ''
      }
    }
  },
  watch: {
    activeTab(val) {
      this.changeTab(val)
    }
  },
  created() {
    this.getList()
  },
  methods: {
    changeVal1(obj) {
      this.$set(this.listQuery, 'warehouseId', obj['warehouseId'])
    },
    changeVal2(obj) {
      this.$set(this.listQuery, 'itemId', obj['itemId'])
    },
    changeTab(val) {
      const tableData = this['tableData' + val]
      this.tableData = tableData
      this.total = tableData.length
      this.listQuery.pageIndex = 1
      this.getDataByPage()
    },
    getDataByPage() {
      const tableData = this['tableData' + this.activeTab]
      var pageIndex = this.listQuery.pageIndex
      const pageSize = this.activeTab == 1 ? 10 : 20
      var arr = []
      var min = pageIndex * pageSize - pageSize
      var max =
        pageIndex * pageSize <= this.total ? pageIndex * pageSize : this.total
      for (var i = min; i < max; i++) {
        arr.push(tableData[i])
      }
      this.pageData = arr
    },
    getList() {
      this.listLoading = true
      this.listQuery.pageIndex = 1
      getItemLedger(this.listQuery).then((res) => {
        this.listLoading = false
        this.tableData1 = res.data.data && res.data.data.style1
        this.tableData2 = res.data.data && res.data.data.style2
        this.tableData3 = res.data.data && res.data.data.style3
        this.tableData = deepClone(this.tableData1)
        this.total = this.tableData.length
        this.getDataByPage()
      }).catch(() => {
        this.listLoading = false
      })
    },
    exportBook() {
      exportLedgernum(this.listQuery)
    },
    printBook() {
      printLedgernum(this.listQuery).then((res) => {
        window.open('http://' + window.location.host + res.data.data)
      }).catch(() => {
        this.listLoading = false
      })
    }
  }
}
</script>
